<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--guohanyu-->
    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../resources/css/laypage.css"/>
    <link rel="stylesheet" href="../resources/layui/css/layui.css"/>
    <script type="text/javascript" src="../resources/js/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../resources/laypage/laypage.js"></script>
    <script type="text/javascript" src="../resources/layui/layui.all.js"></script>
    <script type="text/javascript" src="../resources/vue/vue.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <style>
        input.error {
            border: 1px solid #E6594E;
        }
    </style>
</head>
<header>
    <div class="container">
        <div class="row">
            <div class="col-xs-5">
                <div class="logo">
                    <h1><span>在线考试系统</span></h1>
                </div>
            </div>
        </div>
    </div>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container">
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li>
                        <a href=""><i class=""></i>网站首页</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>试题管理</a>
                    </li>

                    <li>
                        <a href=""><i class=""></i>试卷管理</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>会员管理</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>题库管理</a>
                    </li>
                    <li>
                        <a href=""><i class=""></i>网站设置</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<body>
<div id="app" class="container">
    <form class="form-inline " role="form" action="/ExamPage/addExamPaper" id="createExamPaper" method="post">
            <h2>创建新试卷</h2>
            <input type="text" name="contentKnowledgePoint" id="contentKnowledgePoint"  hidden>
            <div>试卷名称:&nbsp;<input type="text" name="examPaperName" placeholder="试卷名称"></div>
            <div>组卷方式:&nbsp;<select name="examPaperType" >
                <option value="1">自动组卷</option>
            </select></div>
            <div>及格分数:&nbsp;<input type="text" name="passPoint" placeholder="及格分"></div>
            <div>考试时长(分钟):&nbsp;<input type="text" name="duration" placeholder="考试时间"></div>
            <div>题型:选择题型分布&nbsp;</div>
            <div>单选题:&nbsp;<input type="text" id="questionCount" name="questionCount">道&nbsp;&nbsp;每道题 <input type="text" name="questionPoint" id="questionPoint">分</div>
            <div>总分:&nbsp;<input type="text" name="totalPoint" placeholder="总分" id="totalPoint"></div>
            <div>知识分类:&nbsp;知识范围分类</div>
        <div class="clearfix">

            <div id="aq-course1" style="padding:0px;float:left; width:48%;">
                <select id="field" class="df-input-narrow" size="4"
                        style="width:100%;" name="field">
                    <option value="0">请选择科目分类</option>
                    <option v-for="(item,index) in fieldListresult" v-bind:value="item.fieldId" v-bind:fieldName="item.fieldName">
                        {{index+1}}&nbsp;{{item.fieldName}}
                    </option>
                </select>
            </div>
            <div id="aq-course2" style="padding:0px; float:right;width:48%;">
                <select  class="df-input-narrow" size="4"
                        style="width:100%;" >
                    <option value="0">请选择知识点进行添加</option>
                    <option v-for="(item,index) in pointListresult" v-bind:value="item.pointId" class="choosePoint" v-bind:pointName="item.pointName" >
                        {{index+1}}&nbsp;{{item.pointName}}
                    </option>
                </select>
            </div>

            <p style="font-size:12px;color:#AAA;">点击为试卷添加知识点</p>
            <div id="kn-selected"
                 style="padding-left:0px;text-align:center;margin-bottom:20px;">
                <select id="showPoint" class="df-input-narrow" size="4" style="width:80%;"  name="pointRequired">
                </select>

                <p style="font-size:12px;color:#AAA;">双击为试卷移除知识点</p>
                <div class="form-line">
                    <input value="点我清空列表" type="button"  class="df-submit btn btn-info" id="pointClean">
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="sr-only" for="point">选择试卷最终分类</label>
            <select class="form-control" id="point" name="pointId">
                <option value="0">选择试卷最终归类(请先选择科目)</option>
                <option v-for="(item,index) in pointListresult" v-bind:value="item.pointId">{{item.pointName}}</option>
            </select>
        </div>
        <hr/>
        <div class="form-line">
            <input value="发布试卷" type="submit"  class="df-submit btn btn-info" id="examPaperSubmit">
        </div>
        </form>
</div>

</body>
</html>
<script type="text/javascript">
    //定义一个数组存储选择知识点
    var knowledgePoint = new Array();

    //vue使用
    var app = new Vue({
        el: "#app",
        data: {
            result: [],
            fieldListresult: [],
            pointListresult: []
        }
    })

    $(function () {

        getAllField();
        getPointByField();





        //单击添加知识分类
        $("select").delegate(".choosePoint","click",function (e) {
            var v = e.target;
            //防止重复添加
            var v2 = 0;
            for(i=-1;i<knowledgePoint.length;i++){
                if(knowledgePoint[i] == $(v).val()){
                    v2++;
                }
            }
            if(!v2>0){
                knowledgePoint.push($(v).val());
                var str = "<option value='"+$(v).val()+"' class='showPoint'>"+$(v).attr('pointName')+"</option>";
                $("#showPoint").append(str);
                $("#contentKnowledgePoint").val(knowledgePoint);

            }
        });

        //父类下拉框
        $("#field").change(function () {
            getPointByField();

            //移除已添加知识点
            knowledgePoint = new Array();
            $(".showPoint").remove();
            $("#contentKnowledgePoint").val(knowledgePoint);
        })

        //双击移除知识分类
        $("select").delegate(".showPoint","dblclick",function (e) {

            for(i=-1;i<knowledgePoint.length;i++){
                if(knowledgePoint[i] == $(this).val()){
                    //要去除的值
                   var removeItem =   knowledgePoint[i];
                    knowledgePoint = $.grep(knowledgePoint, function(value) {
                        return value != removeItem;
                    });
                }
            }
            $(this).remove();
            $("#contentKnowledgePoint").val(knowledgePoint);
        })

        //点我清空列表
        $("div").delegate("#pointClean","click",function (e) {

            knowledgePoint = new Array();
            $(".showPoint").remove();
            $("#contentKnowledgePoint").val(knowledgePoint);
        })


        //计算总分
        $("#questionPoint").keyup(function (){
                countTotalPoint()
        });
        $("#questionCount").keyup(function (){
            countTotalPoint()
        });


    })

    //计算总分
    function countTotalPoint(){
        var totalPoint = parseInt($("#questionCount").val())*parseInt($("#questionPoint").val());
        $("#totalPoint").val(totalPoint);
    }


    //查询用户数据
    var getExamPaperList = function (curr) {
        $.ajax({
            type: 'post',
            url: '/ExamPage/getExamPaperList',
            dataType: 'json',
            data: {
                pageSize: 10,
                pageNum: curr || 1,
                name: $("#examPaperName").val(),
                fieldId: $("#field").val(),
                pointId: $("#point").val()
            },
            success: function (msg) {
                app.result = msg.page;
                laypage({
                    cont: 'pagenav', //分页容器
                    pages: msg.totalPage,//总页数
                    skin: '#0099CC',
                    first: '首页',
                    last: '末页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getExamPaperList(obj.curr);
                        }
                    }
                });
            }, error: function () {
                alert("失败");
            }
        });
    };

    //查询分类列表信息 郭瀚钰
    function getAllField() {
        $.ajax({
            type: 'post',
            url: '/Field/getAllField',
            dataType: 'json',
            success: function (msg) {
                app.fieldListresult = msg.fieldList
            }, error: function () {
                alert("分类列表失败")
            }
        })
    }

    //根据父类获取小类列表信息 郭瀚钰
    function getPointByField() {
        $.ajax({
            type: 'post',
            url: '/Point/getPointByField',
            dataType: 'json',
            data: {
                fieldId: $("#field").val()
            },
            success: function (msg) {
                app.pointListresult = msg.pointList
            }, error: function () {
                alert("子类分类列表失败")
            }
        })
    }



    //表单验证郭瀚钰
    $("#examPaperSubmit").click(function () {
           if (!check().form()){
               return false;
           }
           if(knowledgePoint.length<1){
               alert("请给试卷添加知识点");
               return false;
           }
    });

    //表单验证郭瀚钰
    function  check() {
        return $("#createExamPaper").validate({
            rules:{
                // contentKnowledgePoint:{
                //     required:true
                // },
                examPaperName:{
                    required:true
                },
                passPoint:{
                    required:true,
                    digits:true
                },
                duration:{
                    required:true,
                    digits:true
                },
                questionCount:{
                    required:true,
                    digits:true
                },
                questionPoint:{
                    required:true,
                    digits:true
                },
                totalPoint:{
                    required:true,
                    digits:true
                },
                field:{
                    required:true
                },
                pointId:{
                    required:true
                }

            },
            message:{
                // contentKnowledgePoint:{
                //     required:"请选择分配知识点"
                // },
                examPaperName:{
                    required:""
                },
                passPoint:{
                    required:"",
                    digits:"请正确输入"
                },
                duration:{
                    required:"",
                    digits:"请正确输入"
                },
                questionCount:{
                    required:"",
                    digits:"请正确输入"
                },
                questionPoint:{
                    required:"",
                    digits:"请正确输入"
                },
                totalPoint:{
                    required:"",
                    digits:"请正确输入"
                },
                field:{
                    required:""
                },
                pointId:{
                    required:""
                }

            }
        })
    }




</script>

